<!-- 历史事项信息 -->
<template>
	<div class="dashboard-container">
		<page-header :headerTitle="$t('message.historyEventsNews.pageTitle')" :showWeather="false" />

		<div class="summary-panel">
			<!-- 告警信息统计 -->
			<div class="panel-section">
				<div class="metric-item">
					<div class="metric-label">{{ $t('message.historyEventsNews.pageEventTotal') }}</div>
					<div class="metric-value">{{ total }}</div>
					<div class="metric-unit">{{ $t('message.historyEventsNews.pageUnit') }}</div>
				</div>
			</div>

			<div>
				<img src="../../assets/image8.png" alt="分隔线" style="height: 6.5rem" />
			</div>

			<!-- 子站选择 -->
			<div class="panel-section">
				<div style="display: flex; justify-content: center; align-items: center">
					<p class="section-label">{{ $t('message.historyEventsNews.pageSubstationChange') }}</p>
					<div style="width: 0.8rem"></div>
					<el-select
						v-model="selectedSubstation"
						:placeholder="$t('message.form.pageSelectHolder')"
						size="small"
						style="width: 15rem"
						class="custom-select"
					>
						<el-option v-for="option in substationOptions" :key="option.value" :label="option.label" :value="option.value" />
					</el-select>
				</div>
			</div>

			<div>
				<img src="../../assets/image8.png" alt="分隔线" style="height: 6.5rem" />
			</div>

			<!-- 事项类型分类和设备类型选择 -->
			<div class="panel-section">
				<div style="display: flex">
					<div>
						<p class="section-label">{{ $t('message.historyEventsNews.pageEventChange') }}</p>
						<div style="height: 0.3rem"></div>
						<el-select
							v-model="selectedType"
							:placeholder="$t('message.form.pageSelectHolder')"
							size="small"
							style="width: 15rem"
							class="custom-select"
						>
							<el-option v-for="option in typeOptions" :key="option.value" :label="option.label" :value="option.value" />
						</el-select>
					</div>

					<div style="width: 0.8rem"></div>

					<div>
						<p class="section-label">{{ $t('message.historyEventsNews.pageDeviceChange') }}</p>
						<div style="height: 0.3rem"></div>
						<el-select
							v-model="selectedDeviceType"
							:placeholder="$t('message.form.pageSelectHolder')"
							size="small"
							style="width: 15rem"
							class="custom-select"
						>
							<el-option v-for="option in deviceTypeOptions" :key="option.value" :label="option.label" :value="option.value" />
						</el-select>
					</div>
				</div>
			</div>

			<div>
				<img src="../../assets/image8.png" alt="分隔线" style="height: 6.5rem" />
			</div>

			<!-- 日期选择 -->
			<div class="panel-section">
				<div>
					<div style="display: flex; align-items: center">
						<p class="section-label">{{ $t('message.historyEventsNews.pageStartTime') }}</p>
						<div style="width: 0.8rem"></div>
						<el-date-picker
							size="default"
							v-model="startDate"
							type="date"
							:placeholder="$t('message.form.pageSelectHolder')"
							class="custom-date-picker"
						/>
					</div>

					<div style="height: 0.8rem"></div>

					<div style="display: flex; align-items: center">
						<p class="section-label">{{ $t('message.historyEventsNews.pageEndTime') }}</p>
						<div style="width: 0.8rem"></div>
						<el-date-picker
							size="default"
							v-model="endDate"
							type="date"
							:placeholder="$t('message.form.pageSelectHolder')"
							class="custom-date-picker"
						/>
					</div>
				</div>
			</div>
		</div>

		<div class="table-container">
			<TableCustom :indexIsShow="true" :total="total" :hasToolbar="false" :tableData="tableData" :tableOption="tableOption">
				<template #historyName="{ scope }">
					<span class="table-link" @click="oneInverterClick(scope)">{{ scope.row.name }}</span>
				</template>

				<template #historyTime="{ scope }">
					<span style="color: #5fcffa">
						{{ scope.row.time }}
					</span>
				</template>

				<template #historyTypeClass="{ scope }">
					<span style="color: #5fcffa">
						{{ scope.row.time }}
					</span>
				</template>

				<template #historyTypeDesc="{ scope }">
					<span style="color: #5fcffa">
						{{ scope.row.status == 0 ? '通讯运行' : scope.row.status == 1 ? '待机' : '/' }}
					</span>
				</template>

				<template #historyStatus="{ scope }">
					<span :style="{ color: scope.row.status == 0 ? '#67C23A' : scope.row.status == 1 ? '#F56C6C' : '#E6A23C' }">
						{{ scope.row.status == 0 ? '发生' : scope.row.status == 1 ? '消除' : '/' }}
					</span>
				</template>
			</TableCustom>
		</div>
	</div>
</template>

<script lang="ts">
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import TableCustom from '../../components/table/index.vue';
import { onMounted, defineComponent, reactive, toRefs, computed } from 'vue';
import pageHeader from '../../components/pageHeader/index.vue';

export default defineComponent({
	name: 'historyEventsNews',

	components: { pageHeader, TableCustom },

	setup() {
		const { t } = useI18n();
		const state = reactive({
			total: 13, // 示例当前事项总数
			selectedSubstation: '',
			selectedType: '',
			selectedDeviceType: '',
			startDate: '',
			endDate: '',
			substationOptions: [
				{ value: '1', label: '子站1' },
				{ value: '2', label: '子站2' },
				{ value: '3', label: '子站3' },
				{ value: '4', label: '子站4' },
			],
			typeOptions: [
				{ value: '1', label: '事项类型1' },
				{ value: '2', label: '事项类型2' },
				{ value: '3', label: '事项类型3' },
				{ value: '4', label: '事项类型4' },
			],
			deviceTypeOptions: [
				{ value: '1', label: '设备类型1' },
				{ value: '2', label: '设备类型2' },
				{ value: '3', label: '设备类型3' },
				{ value: '4', label: '设备类型4' },
			],
			tableData: [
				{
					name: '逆变器1',
					time: '2023-10-01 12:00:00',
					typeClass: '类型1',
					typeDesc: '0',
					status: '0',
				},
				{
					name: '逆变器2',
					time: '2023-10-01 13:00:00',
					typeClass: '类型2',
					typeDesc: '1',
					status: '1',
				},
				{
					name: '逆变器3',
					time: '2023-10-01 14:00:00',
					typeClass: '类型3',
					typeDesc: '2',
					status: '2',
				},
			],
		});

		const router = useRouter();
		const oneInverterClick = (val: any) => {
			router.push({
				path: '/gatherControlManage/oneInverterNews',
				query: { name: val.name },
			});
		};

		// table表头tableOption国际化
		const tableOption = computed(() => [
			{ prop: 'name', label: t('message.historyEventsNews.pageSubstation') },
			{ prop: 'name', label: t('message.historyEventsNews.pageDeviceName'), slotName: 'historyName' },
			{ prop: 'name', label: t('message.historyEventsNews.pageDeviceType') },
			{ prop: 'time', label: t('message.historyEventsNews.pageTime'), slotName: 'historyTime' },
			{ prop: 'typeClass', label: t('message.historyEventsNews.pageTypeClass'), slotName: 'historyTypeClass' },
			{ prop: 'typeDesc', label: t('message.historyEventsNews.pageTypeDesc'), slotName: 'historyTypeDesc' },
			{ prop: 'status', label: t('message.historyEventsNews.pageStatus'), slotName: 'historyStatus' },
		]);

		onMounted(() => {
			// Fetch or initialize data here if necessary
		});

		return {
			tableOption,
			oneInverterClick,
			...toRefs(state),
		};
	},
});
</script>

<style lang="scss" scoped>
.panel-section {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
}

.summary-panel {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #0e2446;
	background-color: #0a1a32;
	border-radius: 4px;
	margin-bottom: 0.5rem;
}

.section-label {
	font-size: 1rem;
	color: #fff;
	font-weight: bold;
	white-space: nowrap;
}

.metric-item {
	display: flex;
	align-items: center;
	margin: 5px 0;
	font-size: 1.3rem;
	white-space: nowrap;
	font-weight: bold;
	justify-content: center;

	.metric-label {
		margin-right: 5px;
	}

	.metric-value {
		color: #5fcffa;
		margin: 0 5px;
	}
}
</style>
